<template>
	<view class="container">
		<view class="card" v-for="(item,index) in list" :key='index' @click="go(item.url)">
			<view class="title-box">
				<view>{{item.trainName}}</view>
				<view class="location" :style="{color:Number(item.status) ? '':'#12D25F'}">{{Number(item.status) ? '进行中':'未开始'}}</view>
			</view>
			<view class="description">
				培训时间：{{item.startTime}}-{{item.endTime}}
			</view>
			<view class="description">
				培训地点：{{item.trainAddress}}
			</view>
			<view class="time-box">
				<view>{{item.createTime}}</view>
			</view>
		</view>
		<!-- 上滑加载更多组件 -->
		<mix-load-more v-show="loadMoreStatus>-1" :status="loadMoreStatus"></mix-load-more>
	</view>
</template>

<script>
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	export default {
		components:{mixLoadMore},
		data() {
			return {
				// list:[
				// 	{
				// 		lesson:'初级电焊工技能培训',
				// 		status:'1',
				// 		lessonTime:'2022年04月04日-2022年04月22日',
				// 		location:'社区职工再就业技能培训学校',
				// 		time:'2022-03-21',
				// 		url:''
				// 	},
				// 	{
				// 		lesson:'初级机床操作工培训',
				// 		status:'0',
				// 		lessonTime:'2022年04月04日-2022年04月22日',
				// 		location:'社区职工再就业技能培训学校',
				// 		time:'2022-03-21',
				// 		url:''
				// 	},
				// 	{
				// 		lesson:'普工培训',
				// 		status:'1',
				// 		lessonTime:'2022年04月04日-2022年04月22日',
				// 		location:'社区职工再就业技能培训学校',
				// 		time:'2022-03-21',
				// 		url:''
				// 	},
				// ],
				list:[],
				loadMoreStatus:0,//0-可上拉显示更多，1-加载中；2-没有更多可加载
				total:0,//列表数据总共条数
				startIndex:1,//第几页，初始值为1
				pageSize:5,//每页查询多少条数据，默认为5
				refreshing:false,
				triggered:false,
				enableScroll:true,
			};
		},
		methods:{
			go(url){
				uni.showLoading({
					title:'加载中...'
				})
				uni.navigateTo({
					url: url,
					success: res => {},
					fail: () => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			/**
			 * 查询全部培训信息
			 * */
			queryTrainInfoPage() {
				this.$api.request.queryTrainInfoPage({
					areaCode:this.$api.util.getAreaCode(),
					startIndex:this.startIndex,
					pageSize: this.pageSize,
					postRequire:null,
					published:null,
				}, (res) => {
					if (res.body.status.statusCode == '0') {
						// console.log(res.body.data.records);
						this.list.push(...res.body.data.records)//列表
						this.total = res.body.data.total//总数
						this.startIndex = res.body.data.current//页数
					}
				})
			},
			/**触底更新加载数据*/
			onReachBottom(){
				if(this.list.length >= this.total) {
					this.loadMoreStatus = 2
					return
				}
				this.loadMoreStatus = 1
				uni.showLoading({
					title: '加载中'
				});
				this.startIndex++//改变页数
				this.queryPostInfoPage()
			}
			
		},
		onShow(){
			this.queryTrainInfoPage()
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}
	.container{
		padding: 32rpx;
	}
	.card{
		padding: 26rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		.title-box{
			display: flex;
			justify-content: space-between;
			font-weight: 700;
			font-size: 32rpx;
			.location{
				color: #3E9CF9;
				font-size: 24rpx;
				font-weight: 500;
			}
		}
		.description{
			margin-top: 16rpx;
			overflow:hidden;
			text-overflow:ellipsis;
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2; 
			color: #999CA3;
			font-size: 24rpx;	
		}
		.time-box{
			display: flex;
			color: #999CA3;
			padding-top: 36rpx;
			view:nth-child(2){
				padding: 0 10rpx;
				image{
					width: 2rpx;
					height: 24rpx;
					vertical-align: middle;
				}
			}
		}
	}
</style>
